import React, { FC, useEffect, useState } from "react";
import { Outlet, Link } from "react-router-dom"
import styles from './MainLayout.module.scss'
import { Layout, Watermark, FloatButton,Spin } from 'antd';
import logo from '../imgs/logo192.png'
import UserInfo from '../components/UserInfo'
import useGetUserInfo from "../hooks/useGetUserInfo";
import useLoadUserData from "../hooks/useLoadUserData";

const MainLayout: FC = () => {
    const { username } = useGetUserInfo()
    const { waitingUserData } = useLoadUserData()
    const [pathname, setPathname] = useState('/')
    useEffect(() => {
        if (username) {
            setPathname('./manage/list')
        }
    }, [username])
    const { Header, Content, Footer } = Layout
    return <Layout className={styles['contanier']}>
        {/* <Watermark content="小吴问卷"> */}
        <Header className={styles.header}>
            <div className={styles.left}>
                <Link to={pathname} style={{ color: '#0095ff',fontWeight:"550",fontSize:"1.1rem" }}>
                    <img src={logo} style={{ width: '40px', verticalAlign: 'middle' }} />
                    <span> 小吴问卷 </span>
                </Link>
            </div>
            <div className={styles.right}>
                <UserInfo />
            </div>
        </Header>
        <Layout className={styles.main}>
        <Content>
          {waitingUserData ? (
            <div style={{ textAlign: 'center', marginTop: '60px' }}>
              <Spin />
            </div>
          ) : (
            <Outlet />
          )}
        </Content>
        </Layout>
        <Footer className={styles.footer}>
            <p className={styles.text}><span className={styles.title}>小吴问卷</span> 不止问卷调查/在线考试</p>
        </Footer>
        {/* </Watermark>         */}
    </Layout>
}

export default MainLayout